<template>
  <div class="table_view" id="table_view" ref="table_view">
    <a-spin :spinning="search_loading" style="height: 100%;">
      <Table
        v-if="columns.length"
        row-key="id"
        ref="table"
        :columns="columns"
        :height="tableHeight"
        :data="tableData"
        @on-sort-change="onSortChange"
      >
      </Table>
      <div v-if="columns.length" style="margin: 10px;overflow: hidden">
        <Page
          style="align-self: flex-end;"
          :total="pagination.total"
          show-total
          show-sizer
          :page-size="pagination.pageSize"
          :current="pagination.current"
          :page-size-opts="pagination.pageSizeOptions"
          @on-change="onPageChange"
          @on-page-size-change="onPageSizeChange"
        />
      </div>
    </a-spin>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import tableSort from '@/views/reportForms/reportConfig/charts/components/chart_config/tableSort';
import elementResize from '@/views/reportForms/show_report/elementResize';

  export default {
    props: ['item', 'title', 'remark', 'dataMapping', 'display', 'position', 'datasetList', 'itemGridHeight', 'search_loading'],
    data() {
      return {
        tableHeight: 0,
        columns: [],
        pagination:{
          total:0,
          current: 1,
          pageSize: 10,
          pageSizeOptions: [10, 20, 30, 40],
        },
        datasetArr: [],
      }
    },
    watch: {},
    computed: {
      tableData () {
        if (this.pagination.total < 1){
          return []
        }
        const start = (this.pagination.current - 1) * this.pagination.pageSize
        const last = start + this.pagination.pageSize
        const end = last >= this.pagination.total ? this.pagination.total : last
        return  this.datasetArr.slice(start, end)
      }
    },
    methods: {
      ...mapActions('reportManage', ['query_report_detail', 'query_dadaset_data']),
      ...mapActions('custom', ['getDsList']),
      onPageSizeChange (page) {
        this.pagination.pageSize = page;
      },
      onPageChange (page) {
        this.pagination.current = page;
      },
      onSortChange(sortObj) {
        this.datasetArr = tableSort(this.datasetArr,sortObj.key,sortObj.order);
        this.pagination.current = 1
      },
      initTableConfig () {
        this.columns.splice(0, this.columns.length);
        if (this.remark) {
          this.$refs.table_view.style.height = "calc(100% - 85px)";
        }else {
          this.$refs.table_view.style.height = "calc(100% - 65px)";
        }
        if (this.tableHeight > 400){
          this.pagination.pageSize = 20
        }
        let dataMapColumns = this.dataMapping.columns;
        dataMapColumns.forEach(column=>{
          this.columns.push({
            title: column.name,
            key: column.column,
            minWidth: 200,
            sortable: 'custom',

          })
        })
      },
      dataConfig () {
        this.datasetArr.splice(0, this.datasetArr.length);
        let count = 0;
        for (let key in this.datasetList) {
          count++;
        }
        if (count == 0) {
          return
        }
        if (this.dataMapping.datasetIds.length == 1) {
          if (!this.datasetList[this.dataMapping.datasetIds[0]]) {
            return
          }
          this.datasetArr = this.datasetList[this.dataMapping.datasetIds[0]].map(item =>{
            let itemVal = {},
                columns = this.dataMapping.columns
            for (let i = 0; i < columns.length; i ++) {
              itemVal[columns[i].column] = item[columns[i].column]
            }
            return itemVal
          })
        } else {
          const _join = this.dataMapping.join;
          for(let i=0; i<_join.length; i++) {
            let left = this.datasetList[_join[i].left.datasetId],
                right = this.datasetList[_join[i].right.datasetId],
                leftColumns = _join[i].left.column,
                rightColumns = _join[i].right.column
            if ((left && left.length) && (right && right.length)) {
              for (let j=0; j<left.length; j++) {
                let rightArr = []
                for (let k=0; k<right.length; k++) {
                  if (left[j][leftColumns] == right[k][rightColumns]) {
                    rightArr.push(right[k])
                  }
                }
                if (rightArr.length!=0) {
                  rightArr.forEach(item => {
                    let obj = {}
                    for(let key in item) {
                      obj[key] = item[key]
                    }
                    for(let key in left[j]) {
                      obj[key] = left[j][key]
                    }
                    this.datasetArr.push(obj)
                  })
                } else {
                  this.datasetArr.push(left[j])
                }
              }
            }
          }
        }
        let orderField = this.display.orderBy.split('-')[1];
        tableSort(this.datasetArr, orderField, this.display.order);
        this.pagination.total = this.datasetArr.length
      },
    },
    mounted () {
      elementResize.on(document.getElementById('table_view'), () => {
          this.$nextTick(() => {
            this.tableHeight = this.$refs.table_view.clientHeight - 35;
          })
      })
    },
  }
</script>

<style scoped>
.table_view {
  width: 100%;
  height: 100%;
  padding: 10px;
}

.table_view >>> .ant-table-wrapper {
  height: 100%;
}

/* .table_view>>>.ant-spin-nested-loading {
  height: calc(100% + 5px);
}

.table_view >>> .ant-spin-container {
  height: 100%;
} */

.table_view >>> .ant-table-small {
  height: 100%;
}

.table_view >>> .ant-table-content {
  height: 100%;
}

#table_view > .ant-spin{
  display: flex;
  justify-content: center;
  align-items: center;
}

.ant-spin-nested-loading>>>.ant-spin-container {
  height: 100%;
}

.ant-table-wrapper {
  height: 100%;
}
</style>
